<template>
  <el-dialog title="排期详情" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="1100px">
    <div class="big-content">
      <div class="code-big">
        <span class="code1">平台</span>
        <span class="code2">广告类型</span>
      </div>
      <ul class="type-list">
        <li v-for="item in platform">{{item | dictionary(platformList)}}</li>
      </ul>
    </div>


    <div class="big-ul">
      <ul class="scheduling title">
        <li v-for="item in typeList">{{item | dictionary(advertTypeList)}}</li>
        <li>总计</li>
      </ul>
      <ul class="scheduling" v-for="(item,index) in schedulList">
        <li v-for="(sitem,sindex) in item.list">
          <dl>
            <dd>
              <div class="code">计划：</div>
              <div class="content">{{sitem.plan}}</div>
            </dd>
            <dd>
              <div class="code">投放：</div>
              <div class="content">{{sitem.work}}</div>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dd>
              <div class="code">计划：</div>
              <div class="content">{{item.plantotal}}</div>
            </dd>
            <dd>
              <div class="code">投放：</div>
              <div class="content">{{item.worktotal}}</div>
            </dd>
          </dl>
        </li>
      </ul>

    </div>

  </el-dialog>
</template>

<script>
  import { reqSchedulList, reqPlateList, reqGgetPlanPosition } from '@/api/advergroupPlanMgt/index'

  export default {
    name: 'viewScheduling',
    data() {
      return {
        schedulList: [],//排期
        typeList: [],//广告类型
        platform: [],//平台类型
        platformList: [],
        advertTypeList: []//接口获取广告组类型
      }
    },
    created() {
      this.getSchedulList()//获取排期
      this.getPlateList()//平台
      this.getAdTypeList()//广告组类型
    },
    filters: {   // 在 filters 节点下定义过滤器
      dictionary(val, arr) {
        if (val) {
          let name = '—'
          arr.forEach(obj => {
            if (obj.id == val) {
              name = obj.name
            }
          })
          return name
        }
      }
    },
    methods: {
      getAdTypeList() {
        this.advertTypeList = []
        reqGgetPlanPosition().then(res => {
          let data = res.data
          data.forEach(item => {
            let obj = {
              id: item.id,
              name: item.name
            }
            this.advertTypeList.push(obj)
          })
          console.log('广告组类型', this.advertTypeList)
        })
      },
      getPlateList() {
        //获取平台
        reqPlateList().then(res => {
          console.log('平台数据', res.data)
          let obj = {
            id: 0,
            name: '全平台'
          }
          res.data.push(obj)

          this.platformList = res.data
        })
      },
      getSchedulList() {
        reqSchedulList().then(res => {
          let list = res.data
          for (let key in list) {
            let itemList = []
            for (let ky in list[key]) {
              let mbj = {
                id: ky,
                plan: list[key][ky].plan,
                work: list[key][ky].work
              }
              itemList.push(mbj)
            }
            let obj = {
              id: key,
              list: itemList
            }
            this.schedulList.push(obj)//转化成数组
            // typeList: [],//广告类型
            //   platform: [],//平台类型
            this.platform = []//平台
            this.typeList = []//广告类型
            this.schedulList.forEach((item, index) => {
              let worktotal = 0//工作总数
              let plantotal = 0//计划总数
              this.platform.push(item.id)
              item.list.forEach((sitem, sindex) => {
                worktotal = worktotal + sitem.work
                plantotal = plantotal + sitem.plan
                if (index == 0) {
                  this.typeList.push(sitem.id)//添加广告类行
                }
              })
              item.worktotal = worktotal
              item.plantotal = plantotal

            })

          }
          console.log('转化成数组', this.schedulList)
        })
      },
      handleCloseDialog() {
        this.$emit('update:visableIf', false)
        this.$emit('handleCloseFilter') //关闭弹窗;
      }
    }
  }
</script>

<style scoped lang="scss">
  .big-ul {
    display: flex;


    ul.scheduling {
      padding: 0px;
      margin: 0;

      &:first-child {
        border-left: 1px solid #eee;
        font-weight: bold;
      }

      &.title {
        li {
          width: 108px;
          justify-content: center;
        }
      }

      li {
        list-style: none;
        height: 78px;
        display: flex;
        padding: 10px;
        align-items: center;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        width: 156px;
        box-sizing: border-box;

        dl {
          padding: 0px;
          margin: 0px;

          dd {
            padding: 0px;
            margin: 0px;
            display: flex;
            align-items: center;

          }
        }
      }
    }
  }

  .type-list {
    display: flex;
    padding: 0;
    margin: 0;
    margin-left: 108px;
    border-left: 1px solid #eee;

    li {
      align-items: center;
      border-right: 1px solid #eee;
      width: 156px;
      list-style: none;
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      border-bottom: 1px solid #eee;
      border-top: 1px solid #eee;

    }
  }

  .code-big {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 108px;
    height: 78px;
    border-left: 1px solid #eee;
    overflow: hidden;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;

    &:after {
      content: "";
      position: absolute;
      width: 1px;
      -webkit-transform: rotate(30deg);
      transform: rotate(55deg);
      background: #eee;
      height: 200px;
      left: 33px;
      top: -47px;
      overflow: hidden;
    }

    .code2 {
      position: absolute;
      right: 9px;
      bottom: 10px;
    }

    .code1 {
      position: absolute;
      left: 10px;
      top: 10px;
    }
  }

  .big-content {
    position: relative;

  }
</style>
